<template>
  <div>
    <line-chart :height="height"
                :optionNew="optionEmotional"
                :saveImage="true"
                @getBase64Image="getBase64Image"

    />
  </div>
</template>
<script>
  import {
    getSentimentByPublishTimeByEventId
  } from "@/api/system/event";
  import LineChart from '@/components/Echarts/Generate/LineChart'

export default {
  props: {
    eventId: {
        type: Number,
        default: 0
      },

  },
  data() {
    return {
      optionLegendSentiments: ["正面", "中性", "负面"],
      optionSeriesSentiments: [],
      optionXAxisDataSentiments: [],
      optionEmotional: {},
      height: "476px",
      loading: true,
    }
  },
  components:{
    LineChart,
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.getSentimentByPublishTimeByEventId()
  },
  created() {

  },
  methods: {
    getBase64Image(val) {
      this.$emit('getBase64Image', val)
    },
    getSentimentByPublishTimeByEventId() {
      this.loading = true;
      getSentimentByPublishTimeByEventId({
        eventId: this.eventId,
      }).then(response => {
        this.loading = false;
        this.optionSeriesSentiments = []
        this.optionXAxisDataSentiments = []
        let list = response.rows
        let zm = {
          name: '正面',
          type: 'line',
          data: [],
          lineStyle: {
            "color": "#ee6666",
            // "width": 4,
            // "type": "dashed"
          },
        }
        let zx = {
          name: '中性',
          type: 'line',
          data: [],
          lineStyle: {
            "color": "#3ba272",
          },
        }
        let fm = {
          name: '负面',
          type: 'line',
          data: [],
          lineStyle: {
            "color": "#0c71e0",
          },
        }
        let zmlist = []
        let zxlist = []
        let fmlist = []
        list.forEach(item => {
          this.optionXAxisDataSentiments.push(item.name);
          let zmnum = 0
          let zxnum = 0
          let fmnum = 0
          item.value.forEach(i => {
            if (i.name == 'ispositive') {
              zmnum = i.value
            }
            if (i.name == 'isneutral') {
              zxnum = i.value
            }
            if (i.name == 'isnegative') {
              fmnum = i.value
            }
          })
          zmlist.push(zmnum)
          zxlist.push(zxnum)
          fmlist.push(fmnum)
        })
        zm.data = zmlist
        zx.data = zxlist
        fm.data = fmlist
        this.optionSeriesSentiments.push(zm)
        this.optionSeriesSentiments.push(zx)
        this.optionSeriesSentiments.push(fm)


        this.optionEmotional = {
          title: {
            text: '正负面信息趋势图',
          },
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          dataZoom: [
            {
              type: 'slider',
              show: true
            }
          ],
          legend: {
            data: this.optionLegendSentiments
          },
          grid: {
            top: 10,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: this.optionXAxisDataSentiments,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            }
          }],
          series: this.optionSeriesSentiments
        }


      });
    },


  }
}
</script>

